<!--
 * @Author: lsmi
 * @Date: 2021-08-03 20:49:55
 * @LastEditors: lsmi
 * @LastEditTime: 2021-12-01 20:16:36
 * @FilePath: \v2_play_js\src\views\Test.vue
-->
<!--  -->
<template>
  <div class="">
    <input type="text" v-model="testsss" />
    <div class="item" v-for="(item, index) in 5" :key="index">
      <el-image />
    </div>
    <!-- <div class="item">test</div> -->
    <test-inline class="item">
      <div>test alert(0)</div>
    </test-inline>
    <button-temp text="12151"></button-temp>
    <div class="chart">
      <v-chart :option="option" />
    </div>
    <el-input-number :value="infoData.count" :min="1" @change="changeAction" />
    <div class="test-image" style="margin-top: 100px">
      <div class="item">
        <el-image class="img" src="" />
      </div>
      <div class="item">
        <i class="el-icon-edit"></i>
      </div>
    </div>
    <div>
      computed:
      <span class="text-green-500 text-base">{{ getCount }}</span>
    </div>
    <el-button @click="setComputedAction">set</el-button>
    <!-- inputAction -->
    <el-input
      :value="infoData.isTestVal"
      @input="throttle(handleInputAction, 300)"
    />
    <div id="btnBox">
      <input type="button" value="button_1" />
      <br />
      <input type="button" value="button_2" />
      <br />
      <input type="button" value="button_3" />
      <br />
      <input type="button" value="button_4" />
      <br />
      <input type="button" value="button_5" />
    </div>
    <!-- flagData -->
    <is-abstract>
      <is-show />
    </is-abstract>
    <el-button @click="startRecorder">点击录音</el-button>
    <el-button @click="stopRecorder">停止录音</el-button>
    <el-button @click="playAction">play</el-button>
  </div>
</template>

<script>
import TestInline from "../components/TestInline.vue";
import MessageTest from "../components/message/main";
import IsShow from "../components/isShow.vue";
import IsAbstract from "../components/abstract";
import Recorder from "js-audio-recorder";
import axios from "axios";
export default {
  components: { TestInline, IsShow, IsAbstract },
  data() {
    return {
      resData: {
        roleList: [],
        searchFormData: {},
      },
      infoData: {
        count: 1,
        isTestVal: "",
      },
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: [
            "直接访问",
            "邮件营销",
            "联盟广告",
            "视频广告",
            "搜索引擎",
            "百度",
            "谷歌",
            "必应",
            "其他",
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            emphasis: {
              focus: "series",
            },
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "邮件营销",
            type: "bar",
            stack: "广告",
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "联盟广告",
            type: "bar",
            stack: "广告",
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "视频广告",
            type: "bar",
            stack: "广告",
            emphasis: {
              focus: "series",
            },
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "搜索引擎",
            type: "bar",
            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
            emphasis: {
              focus: "series",
            },
            markLine: {
              lineStyle: {
                type: "dashed",
              },
              data: [[{ type: "min" }, { type: "max" }]],
            },
          },
          {
            name: "百度",
            type: "bar",
            barWidth: 5,
            stack: "搜索引擎",
            emphasis: {
              focus: "series",
            },
            data: [620, 732, 701, 734, 1090, 1130, 1120],
          },
          {
            name: "谷歌",
            type: "bar",
            stack: "搜索引擎",
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 290, 230, 220],
          },
          {
            name: "必应",
            type: "bar",
            stack: "搜索引擎",
            emphasis: {
              focus: "series",
            },
            data: [60, 72, 71, 74, 190, 130, 110],
          },
          {
            name: "其他",
            type: "bar",
            stack: "搜索引擎",
            emphasis: {
              focus: "series",
            },
            data: [62, 82, 91, 84, 109, 110, 120],
          },
        ],
      },
      testsss: "",
    };
  },
  computed: {
    // isTestComputed() {
    //   return this.infoData.count + 11;
    // },
    getCount: {
      get() {
        return this.infoData.count + 20;
      },
      set(val) {
        this.infoData.count = val;
        return this.infoData.count;
      },
    },
  },
  watch: {},
  beforeMount() {},
  methods: {
    changeAction(count) {
      if (count <= 9) {
        this.$nextTick(() => {
          this.infoData.count = count;
        });
      }
    },
    setComputedAction() {
      this.getCount = 523;
    },
    handleInputAction(val) {},
    inputAction: function (val) {
      if (this.lsmiTest) {
        this.lsmiTest();
        return;
      }
      this.lsmiTest = this.throttle(() => {
        this.handleInputAction(val);
      }, 300);
    },
    throttle(func, delay) {
      var last = 0;
      return function () {
        var now = Date.now();
        if (now >= delay + last) {
          let ary = [];
          ary.concat.call(arguments);
          func.apply(this, ary);
          last = now;
        } else {
          console.log("距离上次调用的时间差不满足要求哦");
        }
      };
    },
    // 开始录音
    startRecorder() {
      this.recorder.start();
    },
    stopRecorder() {
      this.recorder.stop();
    },
    playAction() {
      this.recorder.play();
    },
  },
  created() {
    this.recorder = new Recorder();
    let message;
    message = MessageTest("this is test");
    MessageTest.show();
    // setTimeout(() => {
    //   message = MessageTest("this is test");
    //   setTimeout(() => {
    //     message.message = "update message";
    //   }, 2000);
    // }, 2000);
    function isPromise(obj) {
      return (
        !!obj &&
        (typeof obj === "object" || typeof obj === "function") &&
        typeof obj.then === "function"
      );
    }

    const myPromiseAll = (arr) => {
      let result = [];
      return new Promise((resolve, reject) => {
        for (let i = 0; i < arr.length; i++) {
          if (isPromise(arr[i])) {
            arr[i].then((data) => {
              result[i] = data;
              if (result.length === arr.length) {
                resolve(result);
              }
            }, reject);
          } else {
            result[i] = arr[i];
          }
        }
      });
    };
    let p1 = new Promise((resolve) => {
      setTimeout(() => {
        resolve(20);
      }, 200);
    });
    let p2 = Promise.reject("xxxx");
    myPromiseAll([p1, p2])
      .then((res) => {
        console.log(res, "res");
      })
      .catch((err) => {
        console.log(err, "err");
      });
  },
  mounted() {
    // 节流
    // function throttle(fn, delay) {
    //   let timer = null;
    //   return function () {
    //     if (!timer) {
    //       fn.apply(this, arguments);
    //       timer = setTimeout(() => {
    //         timer = null;
    //       }, delay);
    //     } else {
    //       // console.log("上个任务还没ok");
    //     }
    //   };
    // }
    function resize() {
      console.log("size");
    }
    // window.addEventListener("resize", throttle(resize, 1000));

    // 防抖
    function debounce(fn, delay) {
      let timer = null;
      return function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(this, arguments);
        }, delay);
      };
    }
    window.addEventListener("resize", debounce(resize, 300));
    function ListNode(val, next) {
      this.val = val === undefined ? 0 : val;
      this.next = next === undefined ? null : next;
    }
    const ary = [new ListNode(1, 2), new ListNode(2)];
    var isPalindrome = function (head) {
      let left = head;
      function traverse(right) {
        if (right == null) return true;
        let res = traverse(right.next);
        res = res && right.val === left.val;
        left = left.next;
        return res;
      }
      return traverse(head);
    };
    const a = isPalindrome(ary);
  },
};
</script>
<style lang="scss" scoped>
.item {
  display: inline-block;
  padding: 4px;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: saddlebrown;
}
.chart {
  width: 250px;
  height: 250px;
}
.test-image {
  .item {
  }
}
</style>
<style lang="scss">
#btnBox {
  [value*="button"] {
    margin: 20px;
    padding: 20px;
    cursor: pointer;
  }
}
</style>
